<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>船舶航行记录分析</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto; }
        .container { padding: 20px; border: 1px solid #ccc; border-radius: 8px; }
        textarea { width: 100%; height: 100px; margin: 10px 0; }
        button { padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
        #output { margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 4px; white-space: pre-wrap; }
    </style>
</head>
<body>
    <div class="container">
        <h2>船舶航行记录分析</h2>

        <label>分析问题：</label>
        <textarea id="question" placeholder="输入需要分析的问题，例如：江海货368 2025年2月20日航行记录"></textarea>

        <label>SQL查询结果：</label>
        <textarea id="sqlResult" placeholder="粘贴完整的SQL查询结果JSON数据"></textarea>

        <button onclick="analyzeData()">开始分析</button>

        <div id="output"></div>
    </div>

    <script>
        function analyzeData() {
            const question = document.getElementById('question').value;
            const sqlResult = document.getElementById('sqlResult').value;
            const output = document.getElementById('output');

            output.innerHTML = '正在分析，请稍候...';

            fetch('http://localhost:3001/analyse_sql', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'text/event-stream'
                },
                body: JSON.stringify({ question, sql_result: sqlResult })
            })
            .then(response => {
                const reader = response.body.getReader();
                const decoder = new TextDecoder('utf-8');

                function read() {
                    reader.read().then(({ done, value }) => {
                        if (done) {
                            output.innerHTML += '\n\n分析完成';
                            return;
                        }

                        const lines = decoder.decode(value).split('\n');
                        lines.forEach(line => {
                            if (line.startsWith('data: ')) {
                                const content = line.slice(6).trim();
                                if (content === '[DONE]') return;

                                try {
                                    const data = JSON.parse(content);
                                    output.innerHTML += `\n${data.content}`;
                                } catch (e) {
                                    output.innerHTML += `\n[解析错误] ${content}`;
                                }
                            }
                        });

                        read();
                    });
                }

                read();
            })
            .catch(error => {
                output.innerHTML = `请求失败：${error.message}`;
            });
        }
    </script>
</body>
</html>